<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    一般都是块级元素中放行内元素，而不是在行内元素中放块元素
    块元素可放任何元素
    p元素不能放任何块元素

    浏览器解析网页的时候，会自动修正


    ### 1. **块级元素（Block-level Elements）:**
   - 这些元素在页面中通常会以块的形式显示，独占一行，宽度通常为父元素的 100%。
   - 例如：`<div>`、`<p>`、`<h1>`~`<h6>`、`<ul>`、`<ol>`、`<li>`、`<table>`、`<form>`等。

### 2. **行内元素（Inline Elements）:**
   - 这些元素在页面中通常不会导致新的块，而是在行内显示，只占据它们实际内容所需的宽度。
   - 例如：`<span>`、`<a>`、`<strong>`、`<em>`、`<img>`、`<br>`、`<input>`等。

### 3. **行内块元素（Inline-block Elements）:**
   - 这些元素具有行内元素和块级元素的特性，可以在一行内显示，并且可以设置宽度和高度。
   - 例如：`<div style="display: inline-block;">`、`<span style="display: inline-block;">`等。
   -->
</body>
</html>
<!-- 
### 1. **块级元素（Block-level Elements）:**
   - 这些元素在页面中通常会以块的形式显示，独占一行，宽度通常为父元素的 100%。
   - 例如：`<div>`、`<p>`、`<h1>`~`<h6>`、`<ul>`、`<ol>`、`<li>`、`<table>`、`<form>`等。

### 2. **行内元素（Inline Elements）:**
   - 这些元素在页面中通常不会导致新的块，而是在行内显示，只占据它们实际内容所需的宽度。
   - 例如：`<span>`、`<a>`、`<strong>`、`<em>`、`<img>`、`<br>`、`<input>`等。

### 3. **行内块元素（Inline-block Elements）:**
   - 这些元素具有行内元素和块级元素的特性，可以在一行内显示，并且可以设置宽度和高度。
   - 例如：`<div style="display: inline-block;">`、`<span style="display: inline-block;">`等。

### 4. **可替换元素（Replaced Elements）:**
   - 这些元素的内容是由外部资源（通常是其他文件，比如图像、视频等）来替代的，而不是直接在文档中定义的。
   - 例如：`<img>`、`<video>`、`<audio>`、`<iframe>`等。

### 5. **空元素（Void Elements）:**
   - 这是一类自闭合的元素，它们不包含任何内容或者说不能包含其他元素，常用于嵌入或分隔其他内容。
   - 例如：`<br>`、`<img>`、`<hr>`、`<input>`等。

### 6. **表格元素（Table Elements）:**
   - 用于创建表格结构的元素，包括表格、表格行、表头单元格、表格数据单元格等。
   - 例如：`<table>`、`<tr>`、`<th>`、`<td>`、`<caption>`等。

### 7. **表单元素（Form Elements）:**
   - 用于创建表单的元素，用于收集用户的输入。
   - 例如：`<form>`、`<input>`、`<button>`、`<select>`、`<textarea>`等。

### 8. **文本内容元素（Text Content Elements）:**
   - 用于表示文本内容的元素，包括标题、段落、文本样式等。
   - 例如：`<h1>`~`<h6>`、`<p>`、`<strong>`、`<em>`等。

### 9. **Metadata 元素（Metadata Elements）:**
   - 用于提供关于文档的元信息，如字符集、关键词、描述等。
   - 例如：`<meta charset="UTF-8">`、`<meta name="description" content="...">`等。

### 10. **语义元素（Semantic Elements）:**
   - 用于表示文档的结构和含义，提高文档的语义化。
   - 例如：`<header>`、`<footer>`、`<nav>`、`<article>`、`<section>`等。

 -->